import 'package:amoy_ticket/utils/persistent_storage.dart';
import 'package:amoy_ticket/utils/photo_view_screen/fade_route.dart';
import 'package:amoy_ticket/utils/photo_view_screen/photo_view_simple_screen.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class VipMainPage extends StatefulWidget {
  VipMainPage({Key? key}) : super(key: key);

  @override
  State<VipMainPage> createState() => _VipMainPageState();
}

class _VipMainPageState extends State<VipMainPage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  var ps = PersistentStorage();
  var ps2 = PersistentStorage();

  List _tabs = [
    '全部',
    '电影',
    '演出',
    '线下活动',
    '周边',
    '出行',
    '生活',
  ];
  List _vipPrivilege = [
    {
      'imgUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/vip/main/point_exchange_icon.png',
      'title': '积分兑换',
      'subtitle': '购票优惠'
    },
    {
      'imgUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/vip/main/ticket_changes_icon.png',
      'title': '电影退改签',
      'subtitle': '额外6次/月'
    },
    {
      'imgUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/vip/main/discount_icon.png',
      'title': '早鸟优惠',
      'subtitle': '购票再减4元'
    },
    {
      'imgUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/vip/main/music_live_icon.png',
      'title': '音乐现场福利',
      'subtitle': '现场必备'
    },
    {
      'imgUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/vip/main/film_viewing_report_icon.png',
      'title': '会员观影报告',
      'subtitle': '观影记录'
    },
    {
      'imgUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/vip/main/custom_tickets_icon.png',
      'title': '定制电影票',
      'subtitle': '季度无限次'
    },
    {
      'imgUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/vip/main/free_gift_icon.png',
      'title': '免费影演周边',
      'subtitle': '官方正品'
    },
    {
      'imgUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/vip/main/taxi_diacount_icon.png',
      'title': '打车红包',
      'subtitle': '20元起'
    },
    {
      'imgUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/vip/main/identification_icon.png',
      'title': '取票身份标识',
      'subtitle': '无限次'
    },
    {
      'imgUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/vip/main/star_metting_icon.png',
      'title': '明星见面会',
      'subtitle': '首映礼'
    },
    {
      'imgUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/vip/main/advance_viewing.png',
      'title': '超前观影',
      'subtitle': '电影点映场'
    },
    {
      'imgUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/vip/main/offline_activities_icon.png',
      'title': '线下活动',
      'subtitle': '免费观影团'
    },
  ];

  List _pointExchangeList = [
    {
      'title': 'IMAX30元待击拳(适用于《长津湖只水门桥》《奇迹·笨小孩》《四海》)',
      'howMoney': '30',
      'needPoint': '60'
    },
    {'title': '《不要忘记我爱你》13.14代金券', 'howMoney': '13.14', 'needPoint': '35'},
    {'title': '《长津湖之水门桥》IMAX20元代金券', 'howMoney': '20', 'needPoint': '40'},
    {'title': '10元影城代金券(适用影院771家)', 'howMoney': '10', 'needPoint': '10'},
  ];

  List _vipMainSwiperList = [
    'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/vip/main_swiper/swiper_image1.png',
    'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/vip/main_swiper/swiper_image2.png',
    'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/vip/main_swiper/swiper_image3.png',
    'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/vip/main_swiper/swiper_image4.png',
    'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/vip/main_swiper/swiper_image5.png',
  ];

  @override
  void initState() {
    super.initState();

    _tabController = TabController(length: _tabs.length, vsync: this);
    _tabController.addListener(() {
      if (_tabController.index == 0) {
      } else {}
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          '淘麦VIP会员中心',
          style: TextStyle(
              color: Color(0xFF703d31),
              fontSize: 14.sp,
              fontWeight: FontWeight.w600),
        ),
        centerTitle: true,
        backgroundColor: Color(0xFFfdebd3),
        elevation: 0,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            _buildFlexibleSpaceBar(),
            buildTabBar(),
          ],
        ),
      ),
    );
  }

  TabBar buildTabBar() {
    return TabBar(
      isScrollable: true,
      controller: _tabController,
      labelColor: Color(0xFF30333d),
      indicatorColor: Colors.red,
      indicatorPadding: EdgeInsets.symmetric(horizontal: 6.w),
      unselectedLabelColor: Color(0xFFa1a4ad),
      indicatorSize: TabBarIndicatorSize.label,
      indicatorWeight: 3.0,
      labelStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 13.sp),
      unselectedLabelStyle: TextStyle(fontSize: 13.sp),
      tabs: _tabs.map((e) {
        return Tab(
          text: e,
        );
      }).toList(),
    );
  }

  _buildFlexibleSpaceBar() {
    return Column(
      children: [
        Container(
          padding: EdgeInsets.only(top: 20.h),
          height: 290.h,
          decoration: BoxDecoration(
            // border: Border.all(color: Colors.red),
            gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Color(0xFFfdebd3),
                  Color(0xFFffc7d2),
                  Color(0xFFf5f6f8),
                ]),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: EdgeInsets.only(left: 10.w),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        GestureDetector(
                          onTap: () {
                            // 单张图片大图显示
                            Navigator.of(context).push(
                              FadeRoute(
                                page: PhotoViewSimpleScreen(
                                  imageUrl:
                                      'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/people/dog.jpg',
                                  heroTag: 'simple',
                                  imageProvider: null,
                                ),
                              ),
                            );
                          },
                          child: CircleAvatar(
                            radius: 15.r,
                            backgroundImage: CachedNetworkImageProvider(
                              'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/people/dog.jpg',
                            ),
                          ),
                        ),
                        SizedBox(width: 20.w),
                        Text(
                          '江南第一深情',
                          style: TextStyle(
                              fontSize: 14.sp,
                              color: Color(0xFF7c4437),
                              fontWeight: FontWeight.w600),
                        )
                      ],
                    ),
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(17.sp),
                          bottomLeft: Radius.circular(17.sp),
                        ),
                        gradient: LinearGradient(
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                          colors: [
                            Colors.white,
                            Color(0xFFf5abc6),
                          ],
                        ),
                      ),
                      padding: EdgeInsets.symmetric(
                          horizontal: 15.w, vertical: 10.h),
                      child: Text('会员攻略'),
                    ),
                  ],
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 15.h, bottom: 5.h, left: 10.w),
                child: Row(
                  children: [
                    CachedNetworkImage(
                      imageUrl:
                          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/icon/simle.png',
                      fit: BoxFit.fill,
                      width: 15.w,
                      height: 15.w,
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 3.w),
                      child: Text('我的积分'),
                    ),
                    CachedNetworkImage(
                      imageUrl:
                          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/icon/arrow_right.png',
                      fit: BoxFit.fill,
                      width: 15.w,
                      height: 15.w,
                    ),
                  ],
                ),
              ),
              Padding(
                padding: EdgeInsets.only(left: 10.w),
                child: Text(
                  '150',
                  style: TextStyle(
                      color: Color(0xFF4b272c),
                      fontSize: 25.sp,
                      fontWeight: FontWeight.bold),
                ),
              ),
              SizedBox(height: 15.h),
              Container(
                margin: EdgeInsets.symmetric(horizontal: 10.w),
                padding: EdgeInsets.symmetric(horizontal: 13.w, vertical: 10.h),
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topRight,
                      end: Alignment.bottomLeft,
                      stops: [0, 0.2],
                      colors: [
                        Color(0xFFf3ddf4),
                        Color(0xFFfffcf7),
                      ],
                    ),
                    borderRadius: BorderRadius.circular(10.r)),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            '升级会员',
                            style: TextStyle(
                                color: Color(0xFF4b272c),
                                fontSize: 13.sp,
                                fontWeight: FontWeight.bold),
                          ),
                          Row(
                            children: [
                              Text('细则',
                                  style: TextStyle(
                                      color: Color(0xFFa5a5a5),
                                      fontSize: 11.sp)),
                              Icon(
                                Icons.chevron_right,
                                color: Color(0xFFa5a5a5),
                                size: 15.sp,
                              ),
                            ],
                          )
                        ]),
                    Padding(
                      padding: EdgeInsets.symmetric(vertical: 10.h),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Stack(
                            children: [
                              Container(
                                height: 20.h,
                                width: 250.w,
                                decoration: BoxDecoration(
                                    color: Color(0xFFfee6d8),
                                    borderRadius: BorderRadius.circular(10)),
                              ),
                              Container(
                                alignment: Alignment.centerRight,
                                height: 20.h,
                                width: 120.w,
                                decoration: BoxDecoration(
                                    color: Color(0xFFffae6c),
                                    borderRadius: BorderRadius.circular(10)),
                                child: Text(
                                  '136元  ',
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 10.sp),
                                ),
                              ),
                              Container(
                                alignment: Alignment.centerLeft,
                                height: 20.h,
                                width: 80.w,
                                decoration: BoxDecoration(
                                    gradient: LinearGradient(colors: [
                                      Color(0xFFa8bcfa),
                                      Color(0xFFf780d0),
                                      Color(0xFFf6987c),
                                    ]),
                                    borderRadius: BorderRadius.circular(10)),
                                child: Text(
                                  '已购:2单电影',
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 10.sp),
                                ),
                              ),
                            ],
                          ),
                          Container(
                            padding: EdgeInsets.symmetric(
                                horizontal: 10.w, vertical: 3.w),
                            decoration: BoxDecoration(
                                color: Color(0xFFffbfad),
                                borderRadius: BorderRadius.circular(20.r)),
                            child: Text(
                              '去购票',
                              style: TextStyle(
                                  color: Color(0xFF5c2623),
                                  fontSize: 11.sp,
                                  fontWeight: FontWeight.bold),
                            ),
                          )
                        ],
                      ),
                    ),
                    RichText(
                      text: TextSpan(
                          text: '距会员还需购',
                          style:
                              TextStyle(color: Colors.black, fontSize: 10.sp),
                          children: [
                            TextSpan(
                              text: '3单电影',
                              style: TextStyle(
                                color: Color(0xFFc99178),
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            TextSpan(text: '或'),
                            TextSpan(
                              text: '2单演出',
                              style: TextStyle(
                                color: Color(0xFFc99178),
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            TextSpan(text: ',且金额满124元'),
                          ]),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        Padding(
          padding: EdgeInsets.all(10.w),
          child: Column(
            children: [
              Stack(
                children: [
                  Container(
                    padding: EdgeInsets.only(
                        left: 5.w, right: 5.w, bottom: 5.w, top: 25.w),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10.r),
                      gradient: LinearGradient(
                        begin: Alignment.centerLeft,
                        end: Alignment.centerRight,
                        colors: [Color(0xFFfee0bc), Color(0xFFffc2af)],
                      ),
                    ),
                    child: SingleChildScrollView(
                      child: Container(
                        padding: EdgeInsets.only(top: 30.h, bottom: 10.h),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10.r),
                          color: Colors.white,
                        ),
                        height: 110.h,
                        child: ListView.builder(
                          scrollDirection: Axis.horizontal,
                          itemCount: _vipPrivilege.length,
                          itemExtent: 75.w,
                          itemBuilder: (context, index) {
                            return _vipPrivilegeWidget(
                                _vipPrivilege[index]['imgUrl'],
                                _vipPrivilege[index]['title'],
                                _vipPrivilege[index]['subtitle']);
                          },
                        ),
                      ),
                    ),
                  ),
                  Positioned(
                    top: 0,
                    left: MediaQuery.of(context).size.width / 2 - 115,
                    child: ClipPath(
                      clipper: TrapezoidPath(),
                      child: Container(
                        padding: EdgeInsets.symmetric(horizontal: 40.w),
                        decoration: BoxDecoration(color: Color(0xFFfbebde)),
                        child: Column(
                          children: [
                            Text(
                              '会员特权',
                              style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  fontSize: 15.sp,
                                  color: Color(0xFF995344)),
                            ),
                            Text(
                              '会员可享积分兑换',
                              style: TextStyle(
                                  fontSize: 10.sp, color: Color(0xFFae7f6d)),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              Container(
                margin: EdgeInsets.symmetric(vertical: 5.h),
                height: 80,
                child: Swiper(
                  itemCount: _vipMainSwiperList.length,
                  loop: true, // 允许循环播放
                  autoplay: true, // 允许自动播放
                  scrollDirection: Axis.horizontal, // 滚动方向设置为垂直
                  autoplayDelay: 3000, // 执行时长
                  itemBuilder: (BuildContext context, int index) {
                    return CachedNetworkImage(
                      imageUrl: _vipMainSwiperList[index],
                      fit: BoxFit.fill,
                      // color: Colors.white,
                    );
                  },
                ),
              ),
              SizedBox(height: 20.h),
              Container(
                padding: EdgeInsets.only(
                    top: 10.h, bottom: 10.h, left: 5.w, right: 2.w),
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(10.r)),
                child: Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 10.w),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Row(
                            children: [
                              Text(
                                '积分兑换',
                                style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 13.sp),
                              ),
                              SizedBox(width: 5.w),
                              Text(
                                '每周来逛都有上新',
                                style: TextStyle(
                                    color: Color(0xFFa5a5a5), fontSize: 11.sp),
                              ),
                            ],
                          ),
                          Row(
                            children: [
                              Text(
                                '更多',
                                style: TextStyle(
                                    color: Color(0xFFa5a5a5), fontSize: 11.sp),
                              ),
                              Icon(
                                Icons.chevron_right,
                                color: Color(0xFFa5a5a5),
                                size: 15.sp,
                              ),
                            ],
                          )
                        ],
                      ),
                    ),
                    SizedBox(height: 10),
                    Container(
                      child: SingleChildScrollView(
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10.r),
                            // border: Border.all(color: Colors.red),
                            color: Colors.white,
                          ),
                          height: 110.h,
                          child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            itemCount: _pointExchangeList.length,
                            itemExtent: 150.w,
                            itemBuilder: (context, index) {
                              return _pointExchangeWidget(
                                  _pointExchangeList[index]['howMoney'],
                                  _pointExchangeList[index]['title'],
                                  _pointExchangeList[index]['needPoint']);
                            },
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        )
      ],
    );
  }

  Widget _vipPrivilegeWidget(String imgUrl, String title, String subtitle) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        GestureDetector(
          onTap: () async {
            print(await ps.getKeys());
            print(await ps
                .getStorage('userInfo')
                .then((value) => print('----$value')));
            print('------------');
            print(await PersistentStorage().getKeys());
            print(await PersistentStorage().getStorage('userInfo'));
            print(await PersistentStorage().containsKey('userInfo'));
          },
          child: CircleAvatar(
            radius: 15.r,
            backgroundColor: Color(0xFFfaf5ef),
            // backgroundImage: CachedNetworkImageProvider(
            //   imgUrl,
            // ),
            child: CachedNetworkImage(
              imageUrl: imgUrl,
              color: Color(0xFFec5d95),
              width: 20.w,
              height: 20.w,
            ),
          ),
        ),
        Text(
          title,
          style: TextStyle(
            fontSize: 11.sp,
            color: Color(0xFF1c1c1c),
            fontWeight: FontWeight.bold,
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              subtitle,
              style: TextStyle(
                fontSize: 9.sp,
                color: Color(0xFFc99178),
              ),
            ),
            CachedNetworkImage(
              imageUrl:
                  'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/icon/arrow_right.png',
              fit: BoxFit.fill,
              color: Color(0xFFc99178),
              width: 15.w,
              height: 15.w,
            ),
          ],
        )
      ],
    );
  }

  Widget _pointExchangeWidget(String money, String title, String pointNum) {
    return Container(
      width: 140.w,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10.r),
        color: Color(0xFFfdf8f2),
      ),
      margin: EdgeInsets.only(right: 10.w),
      padding: EdgeInsets.all(10.w),
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ClipPath(
                clipper: CustomTrapezoidPath(),
                child: Container(
                  alignment: Alignment.center,
                  height: 50.h,
                  color: Color(0xFFf3b174),
                  width: 40.w,
                  padding:
                      EdgeInsets.symmetric(horizontal: 6.w, vertical: 10.w),
                  child: RichText(
                    text: TextSpan(
                      text: money,
                      style: TextStyle(
                          color: Colors.white,
                          fontSize:
                              money.toString().length > 3 ? 10.sp : 14.sp),
                      children: [
                        TextSpan(
                          text: '元通用券',
                          style: TextStyle(color: Colors.white, fontSize: 8.sp),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              SizedBox(width: 5.w),
              Expanded(
                child: Text(
                  title,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style:
                      TextStyle(fontSize: 11.sp, fontWeight: FontWeight.bold),
                ),
              )
            ],
          ),
          SizedBox(height: 5.h),
          Container(
            decoration: BoxDecoration(
                color: Color(0xFFfec1ac),
                borderRadius: BorderRadius.circular(5.r)),
            width: 130.w,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Padding(
                  padding: EdgeInsets.only(left: 5.w),
                  child: Text(
                    '$pointNum积分',
                    style: TextStyle(
                        color: Color(0xFF67322d), fontWeight: FontWeight.bold),
                  ),
                ),
                Container(
                  decoration: BoxDecoration(
                      color: Color(0xFF823047),
                      borderRadius: BorderRadius.circular(5.r)),
                  margin: EdgeInsets.only(top: 2.w, bottom: 2.w, right: 2.w),
                  alignment: Alignment.center,
                  width: 45.w,
                  height: 20.h,
                  child: Text(
                    '兑换',
                    style: TextStyle(color: Colors.white),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

//二阶贝塞尔曲线
// https://blog.csdn.net/zl18603543572/article/details/109764664

// 自定义梯形切角
class TrapezoidPath extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();

    path.lineTo(0, 0);
    path.lineTo(size.width, 0);
    path.quadraticBezierTo(
        size.width * 0.85, 0, size.width * 0.85, size.height * 0.7);
    path.quadraticBezierTo(
        size.width * 0.85, size.height, size.width * 0.75, size.height);
    // path.lineTo(size.width * 0.9, size.height);
    path.lineTo(size.width * 0.25, size.height);

    path.quadraticBezierTo(
        size.width * 0.15, size.height, size.width * 0.15, size.height * 0.7);

    path.quadraticBezierTo(size.width * 0.15, 0, 0, 0);

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

class CustomTrapezoidPath extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();

    path.lineTo(0, 0);
    path.lineTo(size.width * 0.4, 0);
    path.quadraticBezierTo(size.width * 0.4, size.height * 0.1,
        size.width * 0.5, size.height * 0.1);
    path.quadraticBezierTo(
        size.width * 0.6, size.height * 0.1, size.width * 0.6, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width * 0.6, size.height);
    path.quadraticBezierTo(size.width * 0.6, size.height * 0.9,
        size.width * 0.5, size.height * 0.9);
    path.quadraticBezierTo(
        size.width * 0.4, size.height * 0.9, size.width * 0.4, size.height);
    path.lineTo(0, size.height);

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}
